@backtop-prefix: ~"@{prefix}backtop";
.@{backtop-prefix} {
  z-index: @zindex-backtop;
  position: fixed;
  cursor: pointer;
  display: none;
  right: 50px;
  bottom: 50px;
  &.@{backtop-prefix}-show {
    display: block;
    animation: h-ani-backtop-show 0.2s linear;
  }
  animation: h-ani-backtop-hide 0.2s linear;

  &-default &-inner {
    background-color: rgba(0, 0, 0, .6);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: all @transition-time ease-in-out;
    &:hover {
      background-color: rgba(0, 0, 0, .7);
    }
  }
  &-default i {
    color: #fff;
    font-size: 24px;
    padding: 8px 12px;
  }
}

@keyframes h-ani-backtop-show {
  from { opacity: 0;}
  50%  { opacity: 0.5;}
  to   { opacity: 1;}
}

@keyframes h-ani-backtop-hide {
  from { opacity: 1;}
  50%  { opacity: 0.5;}
  to   { opacity: 0;}
}